<!-- 首页 立刻体验组件 -->
<template>
  <div class="experienceBtn" @click="goToRegisterOrDashBoard">

    <span>
      {{ $t('home.ApplicationTrial') }}
    </span>
    <el-icon>
      <Right />
    </el-icon>

  </div>
</template>

<script setup>
import { Right } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores";

const router = useRouter();
const userStore = useUserStore();

// goToRegister 跳转 注册页
const goToRegisterOrDashBoard = () => {
  if (userStore.getToken) {
    router.push({
      name: "dashboard",
    });
  } else {
    router.push({
      name: "register",
    });
  }
};

</script>

<style lang="less" scoped>
@font-color-white: #fff;
@index-base-green: #0abe5f;

.experienceBtn {
  font-size: 0.2rem;
  color: @font-color-white;

  width: 2rem;
  height: 0.6rem;
  border: none;
  outline: none;
  background-color: @index-base-green;
  border-radius: 30px;
  margin: 0.5rem auto;
  display: flex;
  justify-content: center;
  align-items: center;

  cursor: pointer;

  span {
    font-size: 0.2rem;
  }

  .el-icon {
    vertical-align: middle;

    svg {
      font-size: 0.3rem;
    }

  }

}

@media(max-width:600px) {

  .experienceBtn {
    margin: 0.3rem auto;
  }

}
</style>